<template>
    <div class="ask">
        <div class="header" >
            <i class="cubeic-back" @click="back"></i>
            <div class="headerTitle">问店铺</div>
            <div class="text" @click="goMyAnswer('/myAnswer')" >我的问答</div>
        </div>
        <div class="goods">
            <div v-if="item" class="box" @click="turn('/detail')">
                <img class="img" :src="imgH+item.img" alt="" />
                <div class="text">
                    <span class="name">{{item.goodsName}}</span>
                    <span class="content">共{{item.total}}个问题</span>
                </div>
            </div>
        </div>
        <div style="height: 12.2rem; overflow:hidden" v-if="data.length!=0" >
            <cube-scroll
                    class="scroll"
                    ref="scroll"
                    :data = data
                    :options="options"
                    @pulling-up="onPullingUp">
                <div class="demo" @click="toAnswer(item.id)" v-for="(item) in data" :key="item.id" >
                    <div class="name">{{item.content}}</div>
                    <div class="box">{{item.list.length!=0?'店铺:':''}}<div class="text">{{item.list.length!=0?item.list[0].content:'暂无回答'}}</div></div>
                    <div class="all">共{{item.list.length}}个回答<img src="./image/右.png" /></div>
                </div>
            </cube-scroll>
        </div>
        <div v-else class="main">
            <img src="./image/组 30.png" alt="">
        </div>
        <div class="footer">
            <input v-model="inputValue" type="text" placeholder="向店铺提问，5~40字" />
            <div @click="sub()">提问</div>
        </div>
    </div>
</template>

<script>
    import {queryGoodsId,question} from "@/api/goods";
    export default {
        name : "asking",
        data () {
            return {
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                item: null,
                data:[],
                inputValue: '',
                page:1,
                limit:4,
                options:{
                    pullUpLoad: true
                }
            }
        },
        activated(){
            this.page=1
            this.onPullingUp()
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            turn(path){
                this.$router.push(path+"?id="+this.$route.query.id)
            },
            toAnswer(id){
                this.$router.push("/answer?queryQuestionId="+id)
            },
            goMyAnswer(path){
                this.$router.push(path)
            },
            onPullingUp(){
                queryGoodsId(this.$route.query.id,this.page,this.limit).then(res=>{
                    if(this.page == 1){
                        this.item = res.extra
                        this.data = res.data
                    }else{
                        this.data = this.data.concat(res.data)
                    }
                    this.page++
                    if (res.data.length > 0){
                        this.$nextTick(()=>{
                            this.$refs.scroll.refresh()
                            this.$refs.scroll.$forceUpdate(true,true)
                        })
                    }

                })
            },
            sub(){
                if(this.inputValue.trim().length<5||this.inputValue.trim().length>40){
                    this.showToastTxtOnly()
                    return
                }
                question(this.$route.query.id,this.inputValue).then(res=>{
                    this.inputValue=''
                    this.success()
                }).catch(()=>{
                    this.inputValue=''
                })
            },
            showToastTxtOnly() {
                this.toast = this.$createToast({
                    txt: '请输入5~40个文字',
                    type: 'txt'
                })
                this.toast.show()
            },
            success() {
                this.toast = this.$createToast({
                    txt: '发送成功',
                    type: 'txt'
                })
                this.toast.show()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .ask
        height 100%
        background-color #F4F3F3
        position relative
        z-index 2
        .header
            padding 0.18rem 0.40rem
            width 9.20rem
            background-color #00D6C0
            display flex
            justify-content space-between
            align-items center
            font-size 0.48rem
            color #fff
            position fixed
            top 0
            left 0
            z-index 999
            background-color #00d6c0
            color #fff
            .headerTitle
                font-size 17px
            .text
                display inline-block
                color #FEFEFE
                font-szie 14px
                width 40px
                transform scale(0.8)
                background-color: #00d6c0
        .goods
            width 100%
            height 2.61rem
            background-color #fff
            padding 1.3rem 0 15px
            display flex
            justify-content space-around
            .box
                width 9.5rem
                height 1.84rem
                background-color #F4F3F3
                border-radius: 10px;
                display flex
                margin 12px
                align-items center
                padding 7px
                .img
                    display inline-block
                    width 55px
                    height 55px
                    margin-right 0.32rem
                .text
                    display: flex;
                    flex-direction: column;
                    .name
                        display inline-block
                        width 260px
                        overflow hidden
                        text-overflow: -o-ellipsis-lastline;
                        text-overflow: ellipsis;
                        white-space nowrap
                        flex-wrap nowrap
                        color #333
                        font-size 14px
                        margin-bottom: 0.32rem
                    .content
                        color #999
                        font-size 14px
        .demo
            margin 12px
            padding 15px 8px
            background-color #fff
            border-radius: 10px;
            .name
                color #333
                font-size 13px
                font-weight bold
                &:before
                    content '问'
                    font-size 10px
                    color #fff
                    background-color #00D6C0
                    display inline-block
                    width 14px
                    height 14px
                    line-height 14px
                    margin-right 10px
                    padding 2px
                    text-align center
            .box
                color #999
                font-size 12px
                margin 12px 0
                display: flex;
                align-items: center;
                &:before
                    content '答'
                    font-size 10px
                    color #fff
                    background-color #FE4B38
                    display inline-block
                    width 14px
                    height 14px
                    margin-right 10px
                    line-height 14px
                    text-align center
                    padding 2px
                .text
                    width 260px
                    color #333
                    display inline-block
                    font-size 12px
                    overflow hidden
                    text-overflow: -o-ellipsis-lastline;
                    text-overflow: ellipsis;
                    white-space nowrap
                    flex-wrap nowrap
                    overflow hidden
                    margin-left 5px
            .all
                color #00D6C0
                font-size 11px
                margin-left 0.6rem
                display flex
                align-items center
                img
                    width 11px
                    height 11px
                    display inline-block
        .footer
            width 100%
            height 50px
            background-color #fff
            position fixed
            bottom 0
            left 0
            display flex
            align-items center
            justify-content space-around
            color #fff
            font-size 17px
            z-index: 2;
            input
                background-color #F4F3F3
                border-radius: 33px;
                width 260px
                height 33px
                padding 0 10px
                outline: none;
            div
                width: 74px;
                height: 33px;
                background: #00D6C0;
                border-radius: 33px;
                line-height 33px
                text-align center

        .main
            background-color #ffffff
            width 100%
            height 100%
            margin-top 12px
            img
                display inline-block
                width 100%
                height 270x
</style>
